<template>
  <div class="document-editor">
    <ckeditor
      :editor="editor"
      v-model="value"
      @input="changeValue"
      :config="editorConfig"
      @ready="onReady"
    />
  </div>
</template>

<script>
import CKEditor from '@ckeditor/ckeditor5-vue'
import DocumentEditor from '@ckeditor/ckeditor5-build-decoupled-document'
import '@ckeditor/ckeditor5-build-decoupled-document/build/translations/zh-cn' // 中文包
import UploadImageAdapter from '@/components/uploader/CK_image-uploader'

export default {
  name: 'ckEditor',
  components: {
    ckeditor: CKEditor.component
  },
  props: {
    change: {
      type: Function,
      required: true
    }
  },
  data() {
    return {
      value: '',
      editor: DocumentEditor,
      editorConfig: {
        toolbar: [
          'heading',
          'alignment',
          'fontSize',
          'highlight',
          'bold',
          'italic',
          'strikethrough',
          'underline',
          'imageUpload',
          'indent',
          'outdent',
          'numberedList',
          'bulletedList',
          '|',
          'undo',
          'redo'
        ],
        language: 'zh-cn'
      }
    }
  },
  methods: {
    onReady(editor) {
      // Insert the toolbar before the editable area.
      editor.ui
        .getEditableElement()
        .parentElement.insertBefore(
          editor.ui.view.toolbar.element,
          editor.ui.getEditableElement()
        )
      editor.plugins.get('FileRepository').createUploadAdapter = loader => {
        return new UploadImageAdapter(this, loader) // this代表vue实例
      }
    },
    setData(val) {
      this.value = val
    },
    changeValue(val) {
      this.change(val)
    }
  }
}
</script>
<style scoped>
.ck-editor__editable {
  border: 1.5px solid #eee;
  height: 240px;
}
</style>
